<template>
  <div>
    <u-popup :round="2" :show="mashow" @close="maclose" mode="center">
      <view class="nomabox">
        <image
          class="rentiplogo"
          mode="widthFix"
          src="@/static/img/rentiplogo.png"
        ></image>
        <view class="tips"> " 需要手机授权登录 </view>
        <view class="tips"> 才能体验这个功能哦 " </view>
        <!-- <button class="goren" @click="gorenpage">授权登录</button> -->
        <button
          class="goren"
          open-type="getPhoneNumber"
          @getphonenumber="onGetphonenumber"
        >
          授权登录
        </button>
      </view>
    </u-popup>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// 做手机号绑定会员
import { login, membersinfo } from "@/utils/api";
const emit = defineEmits(["gorenpage"]);
const textvalue = ref("");
const userId = ref("");

const mashow = ref(false);
const qrcodeSrc = ref("");
const code = ref(null);
const maopen = async () => {
  mashow.value = true;
  const res = await wx.login();
  code.value = res.code;
};
const maclose = () => {
  mashow.value = false;
};
const gorenpage = () => {
  emit("gorenpage", "1");
};
// 获取手机号码
const onGetphonenumber = (ev) => {
  let param = {
    phoneCode: ev.detail.code,
    code: code.value,
    grant_type: "wx_mini_app",
  };
  login(param).then((res) => {
    uni.showToast({ icon: "success", title: "登录成功" });
    uni.setStorageSync("token_type", res.data.token_type);
    uni.setStorageSync("token", res.data.access_token);
    membersinfo().then((meinfo) => {
      uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
      uni.$emit("changeinfo", JSON.stringify(meinfo.data));
      maclose();
    });
  });
};

defineExpose({
  maopen,
  gorenpage,
});
</script>
<style lang="scss" scoped>
.fabox {
  position: relative;
  height: 300rpx;
  margin-bottom: 200rpx;
  display: flex;
  align-items: center;
}
.mabox {
  border-radius: 50rpx;
  width: 614rpx;
  height: 816rpx;
  background: url("http://f.sheshouduo.cn/x/s1/gerenmabg.png")
    no-repeat;
  background-size: 100% 100%;
  padding: 38rpx 56rpx;
  box-sizing: border-box;
  .maimg {
    width: 243rpx;
    height: 243rpx;
    margin: 108rpx 130rpx;
  }
  .nametext {
    font-size: 40rpx;
    color: #000000;
  }
  .phonetext {
    font-size: 25rpx;
    color: #666666;
  }
  .shelogo {
    width: 94rpx;
    height: 116rpx;
    margin-right: 26rpx;
  }
  .tips {
    font-size: 22rpx;
    font-weight: 400;
    color: #333333;
    line-height: 32rpx;
  }
}
.nomabox {
  text-align: center;
  width: 613rpx;
  height: 816rpx;
  background: url("http://f.sheshouduo.cn/x/s1/qurenzhengbg.png") no-repeat;
  background-size: 100% 574rpx;
  .rentiplogo {
    width: 358rpx;
    height: 176rpx;
    margin-top: 86rpx;
    margin-bottom: 176rpx;
  }
  .tips {
    font-size: 33rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20rpx;
  }
  .goren {
    width: 526rpx;
    height: 94rpx;
    line-height: 94rpx;
    background: #953b82;
    border-radius: 7rpx;
    font-size: 27rpx;
    font-weight: 500;
    color: #ffffff;
    margin-top: 130rpx;
  }
}
/* #ifdef MP-WEIXIN */
.erweimabox {
  width: 243rpx;
  height: 243rpx;
  margin: 0rpx auto;
  margin-top: 80rpx;
}
/*  #endif */
</style>
